<template>
  <div class="dashboard-container">
    <!-- 用户信息卡片 -->
    <div class="user-info-section">
      <UserInfoCard :user-info="userInfo" />
    </div>

    <!-- 登录状态测试区域 -->
<!--     <div v-if="isDev" class="login-status-test" style="margin: 20px 0; padding: 20px; border: 1px solid #ddd; border-radius: 8px;">
      <h3>登录状态测试</h3>
      <div style="margin: 10px 0;">
        <strong>Token:</strong> {{ token || '未获取到Token' }}
      </div>
      <div style="margin: 10px 0;">
        <strong>用户信息:</strong> {{ userInfo ? JSON.stringify(userInfo, null, 2) : '未获取到用户信息' }}
      </div>
      <div style="margin: 10px 0;">
        <strong>当前路径:</strong> {{ $route.path }}
      </div>
      <el-button type="primary" @click="testLogout" style="margin-top: 10px;">
        测试退出登录
      </el-button>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import UserInfoCard from '../components/UserInfoCard.vue'

const router = useRouter()
const route = useRoute()

const token = ref('')
const userInfo = ref<any>(null)

// 只在开发环境下显示
const isDev = import.meta.env.DEV

// 获取用户信息
const getUserInfo = () => {
  const userInfoStr = localStorage.getItem('userInfo')
  if (userInfoStr) {
    userInfo.value = JSON.parse(userInfoStr)
  }
}

onMounted(() => {
  // 获取当前登录状态
  token.value = localStorage.getItem('Token') || '未获取到Token'
  getUserInfo()
})

const testLogout = () => {
  // 清除本地存储
  localStorage.removeItem('userInfo')
  localStorage.removeItem('token')
  localStorage.removeItem('Token')
  
  ElMessage.success('已清除登录信息，即将跳转到登录页面')
  
  // 跳转到登录页面
  setTimeout(() => {
    router.push('/')
  }, 1000)
}
</script>

<style scoped>
.dashboard-container {
  min-height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
}

.user-info-section {
  width: 75%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 24px;
  box-sizing: border-box;
}

.login-status-test {
  background-color: #f5f5f5;
}

.login-status-test h3 {
  color: #409EFF;
  margin-bottom: 15px;
}

@media (max-width: 700px) {
  .user-info-section {
    margin: 8px 0 0 0;
  }
}
</style>